<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>层级选择器</title>
  <style type="text/css">
    div, span {
      width: 140px;
      height: 140px;
      margin: 20px;
      background: #9999CC;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Roman;
    }

    div.mini {
      width: 100px;
      height: 50px;
      background: #CC66FF;
      border: #000 1px solid;
      font-size: 14px;
      font-family: Roman;
    }
  </style>
  <script src="js/jquery-3.7.1.min.js"></script>
  <!--
  $("form") 返回form的jquery集合元素
  $("parent > child") 返回parent下的所有child的jquery元素
  $("prev + next") 返回紧跟在prev后的next的jquery元素(一个,且同层级)
  $("prev ~ siblings")  返回prev后的所有siblings的jquery元素(同层级,不包括prev本身)
  $("prev").siblings("form")  返回prev的前后所有的form的jquery元素(同层级,不包括prev本身)
   -->
  <script type="text/javascript">
    $(function () {
      // b1  改变 <body> 内所有 <div> 的背景色为 #0000FF
      $("#b1").click(function () {
        $("div").css("background", "#0000ff");
      })
      // b2  改变 <body> 内子 <div> (第一层div)的背景色为 #FF0033
      $("#b2").click(function () {
        $("body > div").css("background", "#ff0033");
      })
      // b3  改变 id 为 two 的下一个 <div> 的背景色为 #00FF00
      $("#b3").click(function () {
        $("#two + div").css("background", "#00ff00");
      })
      // b4  改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0033FF
      $("#b4").click(function () {
        $("#two ~ div").css("background", "#0033ff");
      })
      // b5  改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF3300
      $("#b5").click(function () {
        $("#two").siblings("div").css("background", "#ff3300");
      })
    })

  </script>

</head>
<body>
<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/><br/><br/>
<input type="button" value=" 改变 <body> 内子 <div> (第一层div)的背景色为 #FF0033" id="b2"/><br/><br/>
<input type="button" value=" 改变 id 为 two 的下一个 <div> 的背景色为 #00FF00" id="b3"/><br/><br/>
<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #0033FF" id="b4"/><br/><br/>
<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF3300" id="b5"/><br/><br/>
<hr/>
<div id="one" class="mini">
  div id=one
</div>

<div id="two">
  div id=two
  <div id="two01">
    div id=two01
  </div>
  <div id="two02">
    div id=two02
  </div>
</div>

<div id="three" class="mini">
  div id=three class=mini
  <div id="three01">
    div id=three01
  </div>
</div>
</body>
</html>
